<template>
    <customNavigationBar title="用户奖励" />

    <view class="page">
        <view class="items">
            <view class="item" v-for="item in list?.records" :key="item.id">
                <view class="avatar">
                    <image :src="item.clientAvatar" mode="aspectFill"></image>
                </view>

                <view class="name">{{ item.clientName }}</view>

                <span>+{{ item.amount }}</span>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { financeApis } from '@/utils/apis';

onShow(() => {
    getData();
});

onReachBottom(() => {
    if (pageParams.value.pageNum < list.value.pages) {
        pageParams.value.pageNum++;
        getData();
    }
});
const pageParams = ref({
    pageNum: 1,
    pageSize: 20
});

const list = ref(null);
const getData = async () => {
    let res = await financeApis.getPromotionUserList(pageParams.value);

    if (res.data.current == 1) {
        list.value = res.data;
    } else {
        let records = [...list.value.records, ...res.data.records];
        list.value = { ...res.data, records };
    }
};
</script>

<style>
page {
    background: #f2f3f5;
}
</style>

<style lang="scss" scoped>
.page {
    padding: 36rpx 24rpx;

    .items {
        width: 100%;
        height: auto;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 0 24rpx;
        .item {
            width: 100%;
            height: 130rpx;
            display: flex;
            align-items: center;
            gap: 50rpx;
            border-bottom: 2rpx solid #f2f3f5;

            &:last-child {
                border: none;
            }

            .avatar {
                width: 80rpx;
                height: 80rpx;
                background: #e4e4e6;
                border-radius: 50%;
                overflow: hidden;
                image {
                    width: 80rpx;
                    height: 80rpx;
                }
            }

            .name {
                flex: 1;
                font-size: 24rpx;
                color: #000000;
                text-align: left;
            }
            span {
                font-size: 24rpx;
                color: #000000;
                text-align: right;
            }
        }
    }
}
</style>
